<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="1">
            <h3 class="box-title">子项目</h3>
          </el-col>
          <el-col :span="23">
            <router-link
              :to="{ name: 'mgroup', params: { id: this.$route.params.id } }"
              v-if="level === 3"
            >
              <el-button class="btn-link-large add-btn">材料分组</el-button>
            </router-link>
            <router-link
              :to="{ name: 'egroup', params: { id: this.$route.params.id } }"
              v-if="level === 3"
            >
              <el-button class="btn-link-large add-btn">专家分组</el-button>
            </router-link>
            <el-input
              v-model="searchTitle"
              placeholder="项目名称"
              clearable
              style="width: 10%; margin:auto 5px;"
            ></el-input>
            <el-input
              v-model="searchName"
              placeholder="负责人"
              clearable
              style="width: 10%; margin:auto 5px;"
            ></el-input>
            <el-select
              v-model="searchStatus"
              clearable
              placeholder="项目申请状态"
            >
              <el-option
                v-for="item in selectStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="searchSch"
              filterable
              clearable
              placeholder="所在单位"
            >
              <el-option
                v-for="item in selectSch"
                :key="item.value"
                :label="item.sch_name"
                :value="item.sch_id"
              >
              </el-option>
            </el-select>
            <el-button class="btn-link-large add-btn" @click="Search()">
              <i class="el-icon-search el-icon--right"> 搜 索</i>
            </el-button>
            <el-button
              round
              style="background-image: linear-gradient(#e9f0e9, white);float:right; margin-right: 50px;"
              @click="goback()"
              >返 回</el-button
            >
          </el-col>
        </div>
        <!-- 一级菜单 -->
        <div class="box-body">
          <el-table
            :data="tableData"
            v-loading="loading"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="ID"
              width="100"
              sortable
            ></el-table-column>
            <el-table-column
              prop="title"
              label="项目名称"
              show-overflow-tooltip
              sortable
            ></el-table-column>
            <el-table-column
              prop="name"
              label="负责人名字"
              sortable
            ></el-table-column>
            <el-table-column
              prop="jobrank"
              label="职称"
              sortable
            ></el-table-column>
            <el-table-column
              prop="sch"
              label="所在单位"
              show-overflow-tooltip
              :formatter="showSchName"
            ></el-table-column>
            <el-table-column prop="status" label="项目申请状态">
              <template scope="scope">
                <el-tag
                  :type="statusList[scope.row.status]['type1']"
                  close-transition
                  >{{ statusList[scope.row.status]['msg1'] }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button
                  v-popover:popover5
                  style="background: rgb(218, 127, 27);color: white;"
                  size="small"
                  @click.stop="show(scope.row)"
                  >项目详情</el-button
                >
                <el-button
                  v-if="scope.row.status <= 2 && level === 1"
                  v-popover:popover5
                  style="background: rgb(45, 100, 173);color: white;"
                  size="small"
                  icon="el-icon-edit"
                  @click.stop="edit(scope.row)"
                  >修改</el-button
                >
                <!-- v-if="scope.row.status <= 10 && (level === 3 || level === 2)" -->
                <el-button
                  v-if="
                    ((scope.row.status === 4 || scope.row.status === 8) &&
                      level === 3) ||
                      (scope.row.status === 2 && level === 2)
                  "
                  v-popover:popover5
                  style="background: #367fa9;color: white;"
                  size="small"
                  icon="el-icon-video-play"
                  @click.stop="check(scope.row)"
                  >审核</el-button
                >
                <!-- <el-button
                  v-if="scope.row.status === 6 && level === 3"
                  v-popover:popover5
                  style="background: #367fa9;"
                  size="small"
                  type="primary"
                  icon="el-icon-s-fold"
                  @click="group = true"
                  >分组</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :pager-count="11"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination>
        </div>
        <el-dialog
          title="项目立项审核"
          center
          :visible.sync="detail"
          width="70%"
        >
          <i><strong>绿色</strong> 代表已完成，<strong>黑色 / 红色</strong> 代表进行时，<strong>灰色</strong> 代表流程</i>
          <el-steps
            :active="steps1"
            :finish-status="finishStatus"
            :process-status="processStatus"
            style="margin-top: 10px;"
          >
            <el-step
              :title="item.title"
              v-for="(item, index) in currProgress"
              :key="index"
            >
            </el-step>
          </el-steps>
          <div v-if="showSupport && proCheck">
            <h2>评审意见汇总</h2>
            <el-table
              :data="adviceData"
              style="width: 100%;"
              v-loading="loading"
              max-height="300"
            >
              <el-table-column
                prop="name"
                label="专家姓名"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="score1"
                label="选题评分"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="score2"
                label="论证评分"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="score3"
                label="研究评分"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="evaluate"
                label="综合评价"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer" v-if="showBtn">
            <el-switch
              style="margin-right:30px;"
              v-model="proCheck"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="通过"
              inactive-text="失败"
            >
            </el-switch>
            <el-select
              v-if="showSupport && proCheck"
              v-model="support"
              placeholder="请选择项目申请类别"
              size="small"
              style="margin-right: 30px;"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="checkPro()" size="mini"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!--         <el-dialog
          title="分组"
          :visible.sync="group"
          width="30%"
          :before-close="handleClose"
        >
          <span>这是一段信息</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="detail = false">取 消</el-button>
            <el-button type="primary" @click="detail = false">确 定</el-button>
          </span>
        </el-dialog> -->
      </div>
    </el-col>
  </el-row>
</template>

<script>
import common from '../../../../assets/js/common'
import http from './../../../../assets/js/http'
export default {
  data() {
    return {
      searchTitle: '',
      searchName: '',
      selectStatus: [
        {
          value: '2',
          label: '高校待审核'
        },
        {
          value: '4',
          label: '教育厅待审核'
        },
        {
          value: '6',
          label: '教育厅审核通过'
        },
        {
          value: '8',
          label: '教育厅待立项'
        },
        {
          value: '10',
          label: '立项通过'
        }
      ],
      searchStatus: '',
      selectSch: Lockr.get('schsInfo'),
      searchSch: '',
      currentPage: 1,
      total: 1,
      showSupport: false,
      group: false,
      level: Lockr.get('userInfo').level,
      progresses: [
        { title: '项目建立', status: 1, show: true },
        { title: '高校待审核', status: 2, show: true },
        { title: '高校审核失败', status: 3, show: false },
        { title: '高校审核通过，教育厅待审核', status: 4, show: true },
        { title: '教育厅审核失败', status: 5, show: false },
        { title: '教育厅审核通过，评审待审核', status: 6, show: true },
        { title: '评审失败', status: 7, show: false },
        { title: '评审通过，教育厅待立项', status: 8, show: true },
        { title: '教育厅立项不通过', status: 9, show: false },
        { title: '立项通过', status: 10, show: true }
      ],
      currProgress: [],
      detail: false,
      curStatus: 0,
      finishStatus: 'success', // 设置结束步骤的状态
      processStatus: 'process', // 设置当前步骤的状态
      statusList: common.statusList,
      tableData: [],
      loading: true,
      proCheck: true,
      showBtn: false,
      support: '',
      options: [],
      curProId: '',
      adviceData: [],
      reData: {}
    }
  },
  methods: {
    show(row) {
      // 这里是查看详情
      router.push({
        name: 'showpro',
        params: {
          id: row.id,
          saveData: this.$route.params.saveData,
          proId: this.$route.params.id,
          reData: this.reData
        }
      })
    },
    edit(row) {
      // 这里是修改详情
      router.push({ name: 'editpro', params: { id: row.id, saveData: this.$route.params.saveData, reData: this.reData }})
    },
    goback() {
      // 返回
      // router.go(-1)
      router.push({
        name: 'reproject',
        params: { saveData: this.$route.params.saveData }
      })
    },
    showSchName(row) {
      return Lockr.get('schInfo')['sch_id_' + row.sch]['sch_name']
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.reData.currentPage = this.currentPage
      this.getList()
    },
    check(row) {
      this.currProgress = []
      this.curStatus = row.status
      this.curProId = row.id
      if (this.curStatus === 8) {
        this.showSupport = true
      } else {
        this.showSupport = false
      }
      this.detail = true
      if (
        (Lockr.get('userInfo').level === 2 && this.curStatus === 2) ||
        (Lockr.get('userInfo').level === 3 && this.curStatus === 4) ||
        (Lockr.get('userInfo').level === 3 && this.curStatus === 8)
      ) {
        this.showBtn = true
      } else {
        this.showBtn = false
      }
      this.getAdvice()
    },
    checkPro() {
      let data = {}
      if (this.proCheck) {
        switch (this.curStatus) {
          // 高校审核成功
          case 2:
            data = {
              status: 4,
              subproject_id: this.curProId
            }
            break
          // 教育厅审核成功
          case 4:
            data = {
              status: 6,
              subproject_id: this.curProId
            }
            break
          // 教育厅立项成功
          case 8:
            if (this.support) {
              data = {
                support: this.support,
                status: 10,
                subproject_id: this.curProId
              }
            } else {
              _g.toastMsg('error', '【项目申请类型】不能为空')
            }
            break
        }
      } else {
        switch (this.curStatus) {
          // 高校审核成功
          case 2:
            data = {
              status: 3,
              subproject_id: this.curProId
            }
            break
          // 教育厅审核成功
          case 4:
            data = {
              status: 5,
              subproject_id: this.curProId
            }
            break
          // 教育厅立项成功
          case 8:
            data = {
              status: 9,
              subproject_id: this.curProId
            }
            break
        }
      }
      console.log(data)
      if (_g.j2s(data) === '{}') {
        this.detail = true
      } else {
        this.$confirm('该操作不可更改，确定通过立项？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.detail = false
            this.apiPost('admin/Report/Check', data).then(res => {
              this.handelResponse(res, data => {
                _g.toastMsg('success', res.data)
                this.getList()
              })
            })
          })
          .catch(() => {
            // handle error
          })
      }
    },
    getAdvice() {
      let data = {
        subproject_id: this.curProId
      }
      this.apiPost('admin/Report/ExpertResult', data).then(res => {
        this.handelResponse(res, data => {
          this.adviceData = res.data
        })
      })
    },
    init() {
      this.currentPage = this.$route.params.reData
        ? this.$route.params.reData.currentPage
        : 1
      this.searchStatus = this.$route.params.reData
        ? this.$route.params.reData.search_status
        : ''
      this.searchSch = this.$route.params.reData
        ? this.$route.params.reData.search_sch
        : ''
      this.searchName = this.$route.params.reData
        ? this.$route.params.reData.search_name
        : ''
      this.searchTitle = this.$route.params.reData
        ? this.$route.params.reData.search_title
        : ''
      // 获取页面的项目类型下拉列表的数据
      this.apiPost('admin/Report/DropdowmList').then(res => {
        this.handelResponse(res, data => {
          this.options = res.data.support
          // this.getList()
          this.Search()
        })
      })
    },
    Search() {
      this.reData = {
        search_status: this.searchStatus,
        search_sch: this.searchSch,
        search_name: this.searchName,
        search_title: this.searchTitle
      }
      /* 若是searchStatus=10，则需要返回的是status>=10的所有信息列表 */
      // this.getList(searchData)
      this.handleCurrentChange(this.currentPage)
    },
    getList() {
      let data = {}
      this.loading = true
      switch (Lockr.get('userInfo').level) {
        case 1:
          // 辅导员
          data = {
            page: this.currentPage,
            project_id: this.$route.params.id,
            idnumber: Lockr.get('userInfo').username,
            level: Lockr.get('userInfo').level,
            type: 1
          }
          break
        case 2:
          // 高校
          data = {
            page: this.currentPage,
            project_id: this.$route.params.id,
            level: Lockr.get('userInfo').level,
            sch: Lockr.get('userInfo').sch,
            type: 1
          }
          break
        case 3:
          // 教育厅
          data = {
            page: this.currentPage,
            project_id: this.$route.params.id,
            level: Lockr.get('userInfo').level,
            type: 1
          }
          break
        default:
          // admin
          data = {
            page: this.currentPage,
            project_id: this.$route.params.id,
            level: 3,
            type: 1
          }
          break
      }
      data = Object.assign(data, this.reData)
      console.log(data)
      this.apiPost('admin/Report/ReportList', data).then(res => {
        this.handelResponse(res, data => {
          this.tableData = res.data.data
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    }
  },
  computed: {
    steps1() {
      this.progresses.forEach(element => {
        if (element.status == this.curStatus) {
          if (!element.show) {
            this.processStatus = 'error'
          } else {
            this.processStatus = 'process'
          }
          this.currProgress.push(element)
        } else if (element.show) {
          this.currProgress.push(element)
        }
      })
      return _g.getIndexByKey(this.currProgress, 'status', this.curStatus)
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
  },
  watch: {},
  mounted() {},
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.button-group {
  margin-left: 13px;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
  /*margin-right: 50px;*/
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.header-button {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.table-header {
  font-weight: bold;
}
.el-button--small {
  padding: 7px 9px;
}
.el-table .showwarn {
  background: oldlace;
}
.edit-btn {
  /*background: #367fa9;*/
  width: 60px;
  height: 28px;
}
.add-btn {
  background: #367fa9;
  margin: 0 10px;
}
.add-btn:hover {
  /* background: #367fa9; */
  background: #367fa9;
}
/*  .btn-link-large {
    padding: 13px 12px;
    font-size: 14px;
}*/
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #92cbf1;
}
</style>
